<template>
	<view>

		<!-- swiper -->
		<view >
		
			<swiper class="swiper" :style="{height:viewHeight+'px'}" :current="1" indicator-active-color="rgba(15, 46, 248, 1.0)"
			 :indicator-dots="true" :duration="1000">
				<!-- 第一页 -->
				<swiper-item>
						<view class="title">Tips：在算法完成后，你可以左滑或右滑查看相应的结果</view>
					<view class="content" @click="useOutClickSide">
						<text class="title">还原算法方式</text>
						<easy ref="easySelect" size="medium" :value="selecValue1" @selectOne="selectOne1"></easy>
					</view>
					<view class="content">
						<text class="title">还原算法内容</text>
						<textarea maxlength="-1" class=" text_style" v-model="str_Uncode"  placeholder="这里填写你学习内容!" />
						</view>
					        <view class="bt_box">
					            <button class="bt_queding" type="primary" @click="start_Uncode" style="background-color: #007AFF;" >开始模拟</button>
					        </view>
					                            <!-- add_userInfo -->
					        <view>
					            <match-media :min-height="700" :orientation="landscape">
									<view style="text-align: center;color: red; margin: 20% auto;" >当您认为上方算法不正确时，请及时反馈！</view>
								</match-media>
					 </view>
				</swiper-item>

				<!-- 第二页 -->

				<swiper-item>
					<view class="content" @click="useOutClickSide">
							<view class="title">Tips：在算法完成后，你可以左滑或右滑查看相应的结果</view>
						<text class="title">模拟算法方式</text>
						<easy-select ref="easySelect" size="medium" :value="selecValue" @selectOne="selectOne"></easy-select>
					</view>
					<view class="content">
						<text class="title">模拟算法内容</text>
						<textarea maxlength="-1" class=" text_style" v-model="str_encode"  placeholder="这里填写你学习的内容!!!" />
						</view>
					        <view class="bt_box">
					            <button class="bt_queding" type="primary" @click="start_encode" style="background-color: #007AFF;" >开始模拟</button>
					        </view>
					                            <!-- add_userInfo -->
					        <view>
					            <match-media :min-height="700" :orientation="landscape">
									<view style="text-align: center;color: red; margin: 20% auto;" >当您认为上方算法不正确时，请及时反馈！</view>
								</match-media>
					 </view>
				</swiper-item>
	<!-- 第三页 -->		
			<swiper-item>
					  <view class="content">
						  	<view class="title">Tips：在算法完成后，你可以左滑或右滑查看相应的结果</view>
					  	<text class="title">模拟运行后内容</text>
					  	<textarea maxlength="-1" class=" text_style_two" v-model="str_end"  placeholder="这里填写你学习的内容!" />
					  </view>
					  <view class="bt_box">
					      <button class="bt_queding" type="primary" @click="copt_Uncode" style="background-color: #007AFF;" >粘贴到剪切板</button>
					  </view>
<!-- add_userInfo -->
					    <view>
					      
					    </view>
				</swiper-item>
		</swiper>
		</view>
	</view>
</template>

<script>
	import easy from '../../components/easy/easy.vue'
	import {encode_uni,decode_uni} from '../../JS/Unicode.js'
	import base64_import from '../../JS/base64.js'
	import MD5 from '../../JS/MD5.js'
	import {stringToHex ,hexToString,des } from '../../JS/AES.js'
	import {decodeutf8,encodeuf8} from '../../JS/utf8.js'
	export default {
		data() {
			return {
				str_encode: '',
				str_Uncode:'',
				str_end:'',
				selecValue: 'Unicode编码算法',
				selecValue1: 'Unicode编码算法',
				viewH:'',
				viewHeight:'',
				match:0,
				show_if:false,
				str_ord:{}
			}
		},
		onLoad() {
					uni.getSystemInfo({
						success: (res) => {
							let height = res.windowHeight
							this.viewHeight = height
							this.viewH=res.windowHeight
						}
					})
					// this.start_Uncode()
		},
		methods: {
			// 汤匙
			tell()
			{
				uni.showToast({
					icon:"success",
					duration:1000,
					title:"模拟成功"
				})
			},
			// 算法按钮
			start_encode()
			{
				if(this.str_encode=='')
				{
					uni.showToast({
					    title: '暂无算法内容',
						icon:"none",
					    duration: 2000
					});
				}
				else
				{
					let times=new Date()
					let new_time=`${times.getMonth()+1}/${times.getDate()} ${times.getHours()}:${times.getMinutes()}`
					this.str_ord={
						"name":this.selecValue,
						"time":new_time,
						"info":this.str_encode
					}
				// 读取上次数据
					uni.getStorage({
						key: "ord_str",
						success: res => {
								let getdata=res.data
								getdata.push(this.str_ord)
								uni.setStorage({
									key: 'ord_str',
									data: getdata,
								});
							},
							fail: () => {
								let getdata=[]
								uni.setStorage({
									key: 'ord_str',
									data: getdata,
								});
							}
					})
					if(this.selecValue=="Base64算法(中文)")
					{
						this.str_end=''
						var str = this.str_encode;
						var base = new base64_import();
						this.str_end=''
						this.str_end= base._utf8_encode(str);
						this.tell()
					}
					else if(this.selecValue=="Base64算法(英文)")
					{
						this.str_end=''
						var str = this.str_encode;
						var base = new base64_import();
						// 编码
						this.str_end=''
						this.str_end= base.encode(str);
						this.tell()
					}
					else if(this.selecValue=="MD5算法(无算法方法，算法不可逆)")
					{
						this.str_end=''
						console.log(4546445646546546)
						var str = this.str_encode;
						this.str_end=''
						this.str_end= MD5(str);
						this.tell()
					}
					else if(this.selecValue=="AES算法(推荐)")
					{
						this.str_end=''
						var key = "this is a 24 byte key !!";
						var message = this.str_encode;
						var ciphertext = des (key, message, 1, 0);
						this.str_end=stringToHex (ciphertext);
						this.tell()
					}
					else if(this.selecValue=="编码字符串-->算法(仅中文)")
					{
						var str = this.str_encode;
						this.str_end=''
						this.str_end= escape(str);
						this.tell()
					}
					else if(this.selecValue=="UTF8编码算法")
					{
						var str = this.str_encode;
						this.str_end=''
						this.str_end= encodeuf8(str);
						this.tell()
					}
					else if(this.selecValue=="Unicode编码算法")
					{
						// unicode算法
						let str=this.str_encode
						this.str_end=''
						this.str_end=encode_uni(str)
						this.tell()
					}
					else
					{
						uni.showToast({
							icon:"none",
							duration:1500,
							title:"敬请期待"
						})
					}
		}
			},
			// 算法按钮
			start_Uncode()
			{
				if(this.str_Uncode=='')
				{
					uni.showToast({
					    title: '暂无算法内容',
						icon:"none",
					    duration: 2000
					});
				}
				else
				{
					if(this.selecValue1=="Base64算法(中文)")
					{
						this.str_end=''
						var str = this.str_Uncode;
						var base = new base64_import();
						this.str_end=''
						this.str_end= base._utf8_decode(str);
						this.tell()
					}
					else if(this.selecValue1=="Base64算法(英文)")
					{
						this.str_end=''
						var str = this.str_Uncode;
						var base = new base64_import();
						this.str_end=''
						this.str_end= base.decode(str);
						this.tell()
					}
					else if(this.selecValue1=="AES算法(推荐)")
					{
						this.str_end=''
							this.str_end=this.str_encode;
							this.tell()
					}
					else if(this.selecValue1=="编码字符串-->算法(仅中文)")
					{
						var str = this.str_encode;
						this.str_end=''
						this.str_end= unescape(str);
						this.tell()
					}
					else if(this.selecValue1=="UTF8编码算法")
					{
						var str = this.str_encode;
						this.str_end=''
						this.str_end= decodeutf8(str);
						this.tell()
					}
					else if(this.selecValue1=="Unicode编码算法")
					{
					let str=this.str_Uncode
					this.str_end=''
					this.str_end=decode_uni(str)
					this.tell()
					}
					else
					{
						uni.showToast({
							icon:"none",
							duration:1500,
							title:"敬请期待"
						})
					}
		}
			},

// 粘贴板
			copt_Uncode()
			{
				uni.setClipboardData({
				    data:this.str_end,
				   
				});
			},
			// 插件市场
			selectOne(options) {
			    this.selecValue = options.label
			},
			selectOne1(options) {
			    this.selecValue1 = options.label
			},
			 useOutClickSide() {
			    this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
			},
			// 插件市场
			end_encode()
			{
				this.show_if=false
			}
		},
		// 插件市场的
		 components:{
					easy
		 }
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.bt_box
	{
		margin-top: 8%;
	}
	.bt_queding{
		border-radius: 10rpx;
		width: 680rpx;
	}

	.text_style
	{
		border: 2rpx solid #e6e6e6;
		border-radius: 2px;
		width: 680rpx;
	}
	.text_style_two{
		border: 2rpx solid #e6e6e6;
		border-radius: 2px;
		width: 680rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		text-align: center;
		margin: 4%;
	}
	.swiper{
		width: 100%;
	}
</style>
